<template>
  <div>
    <ul class="list">
      <li>
        <div class="top">
          <span>书名：平视姚明</span>
          <span>估价：￥30.10</span>
          <span>实价：￥20.10</span>
        </div>
        <div class="reason">
          降价原因：轻微破损
        </div>
        <div class='picList'>
          <img src="../../../static/mine/bookpic.jpg" alt="">
          <img src="../../../static/mine/bookpic.jpg" alt="">
          <img src="../../../static/mine/bookpic.jpg" alt="">
        </div>
        <div class="footer">
          <button class="default" size="mini" hover-class="none">帮我寄回</button>
          <button class='warn' size="mini" hover-class="none">同意降价</button>
        </div>
      </li>
      <li>
        <div class="top">
          <span>书名：平视姚明</span>
          <span v-if="false">估价：￥30.10</span>
          <span v-if="false">实价：￥20.10</span>
        </div>
        <div class="reason">
          拒绝原因：严重破损
        </div>
        <div class='picList'>
          <img src="../../../static/mine/bookpic.jpg" alt="">
          <img src="../../../static/mine/bookpic.jpg" alt="">
          <img src="../../../static/mine/bookpic.jpg" alt="">
        </div>
        <div class="footer">
          <button class="default" size="mini" hover-class="none">帮我寄回</button>
          <button class='warn' size="mini" hover-class="none">平台处理</button>
        </div>
      </li>
    </ul>
    <div class="hasnolist">
      暂无反馈信息
      <div>
        <div class="goBuyBook" @click="goBuyBook">去卖书</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      index: '0',
      list: [1]
    }
  },
  methods: {
    goBuyBook() {
      wx.redirectTo({
        url: '/pages/index/main'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.list {
  display: flex;
  flex-wrap: wrap;
  padding: 18rpx;
  li {
    padding: 30rpx 0;
    width: 100%;
    border-bottom: 1rpx solid #eee;
    .top {
      height: 50rpx;
      display: flex;
      & > span:nth-child(1) {
        width: 40%;
        line-height: 40rpx;
        font-size: 32rpx;
        font-weight: 900rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      & > span:nth-child(2) {
        line-height: 40rpx;
        width: 30%;
        font-size: 28rpx;
        color: #999;
        text-decoration: line-through;
      }
      & > span:nth-child(3) {
        line-height: 40rpx;
        width: 30%;
        font-size: 24rpx;
        font-weight: 900rpx;
        color: #c78651;
      }
    }
    .reason {
      font-size: 28rpx;
      line-height: 40rpx;
      color: #c78651;
    }
    .picList {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 180rpx;
      img {
        width: 230rpx;
        height: 155rpx;
        border-radius: 20rpx;
      }
    }
    .footer {
      padding-top: 10rpx;
      text-align: right;
      font-size: 24rpx;
      .default {
        margin-left: 18rpx;
        background-color: #fff;
      }
      .warn {
        margin-left: 18rpx;
        background-color: #c68452;
        color: #fff;
      }
    }
  }
}
.hasnolist {
  text-align: center;
  margin-top: 200rpx;
  font-size: 28rpx;
  color: #666;
}
.goBuyBook {
  margin: 20rpx auto;
  width: 150rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 16px;
  color: #c78650;
  border: 1rpx solid #c78650;
  border-radius: 10rpx;
}
</style>

